import React, { Component } from 'react'

const center = 'center'
// 1. 给按钮绑定点击事件
// 2. 获取原来的数字
// 3. 在原来数字的基础上 +1
export default class App extends Component {
  // 先把 0 提取到 state 当中，因为后续会变化
  // 高阶函数：返回函数的函数，函数作为参数传递的函数 arr.map(() => {})
  state = {
    count: 0,
  }
  handleClick () {
    // 期望：this 是实例对象
    console.log(this,11)
    return () => {
      // 可以在这个函数里面执行点击的业务逻辑
      // 箭头函数没有自己的 this，会向外部（#1）找，而外部就是实例
      console.log(this.state.count,22);
    }
  }
  render () {

    return (
      <div style={{ textAlign: center }}>
        <h2>计数器：{this.state.count}</h2>
        {/* 加了括号，根本不会等你点，一上来 this 直接调用 handleClick */}
        {/* 但是当你点击按钮的时候，实际执行的是 this.handleClick 调用完毕的返回值，返回值是 undefined */}
        {/* 所以当你点击按钮的时候执行的是 undefined */}
        <button onClick={this.handleClick()}>+1</button>
      </div>
    )
  }
}